<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="js/module/jquery-3.3.1.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 63px; /* 必须 */
        overflow: hidden; /* 必须 */
        margin: 50px auto;
        border: 1px solid red;
        text-align: center;
      }
      ul {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div id="review_box">
      <ul id="comment1">
        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
        <li>第四条</li>
        <li>第五条</li>
        <li>第六条</li>
      </ul>
      <ul id="comment2"></ul>
    </div>
  </body>

  <script>
    $(document).ready(function () {
      roll(50);
    });

    function roll(t) {
      var $ul1 = $("#comment1");
      var $ul2 = $("#comment2");
      var $ulbox = $("#review_box");
      $ul2.html($ul1.html());
      $ulbox.scrollTop(0); // 开始无滚动时设为0
      var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快

      // 鼠标移入div时暂停滚动
      $ulbox.mouseover(function () {
        clearInterval(timer);
      });

      // 鼠标移出div后继续滚动
      $ulbox.mouseout(function () {
        timer = setInterval(rollStart, t);
      });
    }

    // 开始滚动函数
    function rollStart() {
      var $ul1 = $("#comment1");
      var $ul2 = $("#comment2");
      var $ulbox = $("#review_box");
      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
      if ($ulbox.scrollTop() >= $ul1.outerHeight()) {
        $ulbox.scrollTop(0);
      } else {
        $ulbox.scrollTop($ulbox.scrollTop() + 1);
      }
    }
  </script>
</html>
